<template>
	<view>
		<u-navbar :is-back="false" :title="info.nickname">
			<view slot="right">
				<image src="/static/img/shezhi.png" class="shezhi-icon" @click="gosetting()"></image>
			</view>
		</u-navbar>
		<view class="gerenziliao">
			<view class="gerenziliao-top u-flex">
				<image :src="info.face" class="grzl-tx"></image>
				<view class="gerenInfor_list">
					<view class="infor_list-cell">
						<image src="../../static/img/haoyou.png" class="infor-icon"></image>
						<text class="infor-text">好友列表</text>
					</view>
					<view class="infor_list-cell" @click="goedit">
						<image src="../../static/img/bianjizhiliao.png" class="infor-icon"></image>
						<text class="infor-text" >编辑资料</text>
					</view>
					<view class="infor_list-cell">
						<image src="../../static/img/erweima.png" class="infor-icon"></image>
						<text class="infor-text">二维码</text>
					</view>
				</view>
			</view>
			<view class="gerenziliao-infor">
				<view class="name">{{info.sign}}</view>
				<view class="IDnumber">ID：{{info.no}}</view>
				<view class="renzheng"><image src="../../static/img/index/renzheng.png" class="rz-icon"></image> 已实名认证</view>
			</view>
			<view class="gerenziliao-infor2">
				<text class="jianjie-text">{{info.sex}} {{info.age}}岁</text>
				<text class="jianjie-text">{{info.province}} {{info.city}}</text>
				<text class="jianjie-text color-green">详细信息></text>
			</view>
			<view class="gerenziliao-text" @click="gologin()">登录</view>
			<view class="gerenziliao-text">好友的个人签名，快来加我好友的个人签名，快来加我为好友吧</view>
			<view class="gerenziliao-total u-flex">
				<view class="total-text">
					<text class="color5">{{info.video_num}}</text> 视频
				</view>
				<view class="total-text">
					<text class="color5">{{info.post_num}}</text> 动态
				</view>
				<view class="total-text">
					<text class="color5">{{info.activity_num}}</text> 活动
				</view>
			</view>
		</view>
		<view class="gerenziliao-tab">
			<u-tabs-swiper ref="uTabs" :list="list" :bar-style="barstyle"  :current="current" @change="tabsChange" :is-scroll="false" active-color="#1b1b1b" 
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<view class="video-tabCont">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="video-swiper">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="video_list_box">
							<view class="video_list" v-if="v_list.length>0" v-for="item in v_list" :key="item.id" >
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="dongtai_list_box">
							<view class="dongtai_list_cell">
								<view class="dongtai-time u-font-24">
									<text class="u-font-30">4月</text>15日
								</view>
								<view class="dongtai-wenben color5">
									纯文本的图文动态展示,纯文本的图文动态展示纯文本的图文动态展示纯文本的图文动态展示
								</view>
							</view>
							<view class="dongtai_list_cell">
								<view class="dongtai-time u-font-24">
									<text class="u-font-30">4月</text>15日
								</view>
								<view class="dongtai-tuwen color5">
									<image src="../../static/demo/1.jpg" class="tupian"></image>
									<text class="u-flex-1">文字加图片的展示方式</text>
								</view>
							</view>
							<view class="dongtai_list_cell">
								<view class="dongtai-time u-font-24">
									<text class="u-font-30">4月</text>15日
								</view>
								<view class="dongtai-tuwen dongtai-tuwen-more color5">
									<view class="tupian-more">
										<image src="../../static/demo/1.jpg" class="tupian"></image>
										<image src="../../static/demo/1.jpg" class="tupian"></image>
									</view>
									<text class="u-flex-1 more-text">纯文本的图文动态展示,纯文本的图文动态展示纯文本的图文动态展示纯文本的图文动态展示</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="activity-list">
							<view class="activity-list-cell">
								<image src="../../static/demo/1.jpg" class="activity-img"></image>
								<view class="activity-body">
									<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
									<view class="activity-cont">
										<view class="huodong-xinxi">
											<text>线上活动</text>
											<text class="u-line-1">参与人数：111</text>
											<text>2021/3/1-2021/4/29</text>
										</view>
										<view class="ckxq-btn">查看详情</view>
									</view>
								</view>
							</view>
							<view class="activity-list-cell">
								<image src="../../static/demo/1.jpg" class="activity-img"></image>
								<view class="activity-body">
									<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
									<view class="activity-cont">
										<view class="huodong-xinxi">
											<text>线上活动</text>
											<text class="u-line-1">参与人数：111</text>
											<text>2021/3/1-2021/4/29</text>
										</view>
										<view class="ckxq-btn">查看详情</view>
									</view>
								</view>
							</view>
							<view class="activity-list-cell">
								<image src="../../static/demo/1.jpg" class="activity-img"></image>
								<view class="activity-body">
									<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
									<view class="activity-cont">
										<view class="huodong-xinxi">
											<text>线上活动</text>
											<text class="u-line-1">参与人数：111</text>
											<text>2021/3/1-2021/4/29</text>
										</view>
										<view class="ckxq-btn">查看详情</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="video_list_box">
							<view class="video_list" v-if="c_list.length>0" v-for="item in c_list" :key="item.id" >
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="video_list_box">
							<view class="video_list" v-if="s_list.length>0" v-for="item in s_list" :key="item.id" >
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
							<view class="video_list">
								<image src="../../static/demo/5.jpg" class="video-bg"></image>
								<view class="bofangliang">
									<image src="../../static/img/index/bofang.png" class="bofang-icon"></image> 1564
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	import { isEmpty,isEmptyObj} from '../../utils';
	export default {
		data() {
			return {
				info:{
					'face'    :'/static/demo/1.jpg',
					'nickname':'哈哈哈哈',
					'sign'    :'个性签名',
					'no'      :'000001',
					'sex'     :'男',
					'age'     :18,
					'province':'北京',
					'city'    :'海淀',
					'company' :'无',
					'position':'无',
					'school'  :'xx大学',
					'degree'  :'本科',
					'video_num':0,
					'post_num' :0,
					'activity_num':0
				},
				list: [{
					name: '视频'
				}, {
					name: '动态'
				}, {
					name: '活动'
				},
				{
					name: '收藏'
				},
				{
					name: '赞过'
				}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				barstyle:{
					backgroundColor:'#2ea34a'
				},
				v_list:[],
				p_list:[],
				a_list:[],
				c_list:[],
				s_list:[]
			};
		},
		computed: {
			...mapState('user',['token','userInfo']),
		},
		onLoad() {
			if(this.token){
				
			}
		},
		onShow() {
			if(!isEmptyObj(this.userInfo)){
				this.info= this.userInfo;
			}else{
				this.getUserInfo();
			}
		},
		methods: {
			...mapMutations('user',['setUserInfo']),
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			},
			getUserInfo(){
				if(!this.token) return;
				this.$ajax.get('member/getuserinfo').then(data=>{
					this.setUserInfo(data.data);
					this.info= data.data;
				})
			},
			gologin(){
				return uni.navigateTo({
					url:'/pages/user/login/code'
				})
			},
			goedit(){
				return uni.navigateTo({
					url:'/pages/user/bianjiziliao'
				})
			},
			gosetting(){
				return uni.navigateTo({
					url:'/pages/user/setting'
				})
			},
		}
	}
</script>

<style lang="scss">
.gerenziliao{
	padding: 0 50rpx;
}
.gerenziliao-top{
	justify-content: space-between;
	margin: 32rpx 0;
	.grzl-tx{
		width: 140rpx;
		height: 140rpx;
		border-radius: 100px;
	}
	.add-friend{
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		justify-content: center;
		background-color: #2ea34a;
		color: #FFFFFF;
		border-radius: 10rpx;
		font-size: 28rpx;
		.add-icon{
			width: 48rpx;
			height: 48rpx;
			margin-right: 15rpx;
		}
	}
}
.gerenziliao-infor{
	display: flex;
	align-items: center;
	.name{
		font-size: 36rpx;
		color: #000;
		width: 43%;
	}
	.IDnumber{
		font-size: 20rpx;
		width: 27%;
	}
	.renzheng{
		font-size: 20rpx;
		display: flex;
		align-items: center;
		width: 30%;
		.rz-icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
}
.gerenziliao-infor2{
	margin: 35rpx 0 25rpx;
	display: flex;
	align-items: center;
	.jianjie-text{
		width: 33%;
	}
}
.gerenziliao-text{
	margin-bottom: 25rpx;
	font-size: 24rpx;
}
.gerenziliao-total{
	
	.total-text{
		color: #aeaeae;
		margin-right: 30rpx;
	}
}
.gerenziliao-tab{
	padding: 10rpx 0 35rpx;
	border-bottom:4rpx solid #e4e4e4;
	margin-bottom: 30rpx;
}
.video_list{
	position: relative;
	width: 30%;
	height: 280rpx;
	margin-bottom: 3%;
	margin-right: 30rpx;
	.video-bg{
		width: 100%;
		height: 280rpx;
	}
}
.video_list:nth-child(3n+3){
	margin-right: 0;
}
.bofangliang{
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	color: #FFFFFF;
	font-size: 24rpx;
	.bofang-icon{
		width: 14rpx;
		height: 16rpx;
		margin-right: 10rpx;
	}
}
.video_list_box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 30rpx;
}
page{
	height: 100%;
}
.video-tabCont{
	//height: 600rpx;
}
.video-swiper{
	height: 300px;
}
.swiper-item {
	height: 100%;
}
.shezhi-icon{
	width: 32rpx;
	height: 32rpx;
	margin-right: 30rpx;
}

.gerenInfor_list{
	flex: 1;
	display: flex;
	align-items: center;
	margin-left: 40rpx;
	.infor_list-cell{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 33%;
		.infor-icon{
			width: 48rpx;
			height: 48rpx;
		}
		.infor-text{
			font-size: 20rpx;
			color: #515151;
			margin-top: 10rpx;
		}
	}
}
.dongtai_list_box{
	padding: 0 20rpx;
	.dongtai_list_cell{
		display: flex;
		margin-bottom: 40rpx;
		.dongtai-time{
			margin-top: 20rpx;
			width: 110rpx;
			margin-right: 20rpx;
		}
		.dongtai-wenben{
			background-color: #f3f3f3;
			flex: 1;
			padding: 14rpx 20rpx;
			font-size: 24rpx;
		}
		.dongtai-tuwen{
			display: flex;
			flex: 1;
			.tupian{
				width: 135rpx;
				height: 135rpx;
				margin-right: 20rpx;
			}
			.tupian-more{
				display: flex;
				flex-direction: column;
				.tupian{
					margin-bottom: 20rpx;
				}
			}
		}
		.dongtai-tuwen-more{
			.more-text{
				margin-top: 155rpx;
			}
		}
	}
}
.activity-list{
	.activity-list-cell{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		position: relative;
		.activity-img{
			width: 300rpx;
			height: 180rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.activity-body{
			margin-left: 30rpx;
			flex: 1;
			overflow: hidden;
			.activity-name{
				font-size: 24rpx;
				color: #515151;
			}
			.activity-cont{
				margin: 15rpx 0;
				display: flex;
				flex-direction: row;
				color: #8e908f;
				font-size: 22rpx;
				align-items: flex-end;
				justify-content: space-between;
				.huodong-xinxi{
					display: flex;
					flex-direction: column;
				}
				.ckxq-btn{
					border: 1px solid #ff3c3e;
					color: #ff3c3e;
					border-radius: 8rpx;
					font-size: 20rpx;
					padding:3rpx 8rpx;
				}
			}
		}
		.activity-body-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.activity-price{
				color: #8e908f;
				font-size: 24rpx;
			}
			.acitivity-btn{
				color: #FFFFFF;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #2ea34a;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}

.activity-list-cell:last-child::after{
	height: 0;
}
</style>
